﻿/**
 * 列表表格类
 */
var ListTable = new Class({

	initialize : function(tableArea){
		this.tableArea = tableArea || document.body;
		this.action = new Action();
	},

	/**
	 * 生成列表表格(包含TBODY和一行TH标题)
	 */
	buildTable : function(){
		this.table = new Element('table',{
			'id' : 'manList'
		});
		var tbody = new Element('tbody').injectInside(this.table);
		var titleTr = new Element('tr', {'class': 'listTitle'}).injectInside(tbody);
		var nameTh = new Element('th',{
			'class' : 'nameBox'
		})
		.injectInside(titleTr).setHTML('姓名');
		nameTh.addEvent('click', function(){
			this.fireEvent('onOrder', ['name', nameTh]);
		}.bind(this));
		new Element('th',{
			'class' : 'briefBox'
		}).injectInside(titleTr).setHTML('简介');
		return this.table;
	},

	/**
	 * 生成列表中的一行
	 * @return 列表表格的TR控件, 包含有两个扩展方法(
	 * 
	 *     {function} setName 设定该行的姓名信息
	 *     @param {string} nameString 姓名信息字符串
	 *     @return 返回TR控件本身
	 *         
	 *     {function} setBrief 设定该行的简介信息
	 *     @param {string} briefString 简介信息字符串
	 *     @return 返回TR控件本身
	 * )
	 */
	buildListTr : function(){
		var newTr = new Element('tr');
		//预设TD控件事件处理
		var tdEvents = {
			'mouseover' : this.toggleTrClass.create({'event':true,'arguments':'onSelecte'}),
			'mouseout'	: this.toggleTrClass.create({'event':true,'arguments':'onSelecte'}),
			'click'		: this.markOpened.bind(this)
		};
		var nameBoxTd = new Element('td',{
			'class' : 'nameBox contentBox',
			'events': tdEvents
		}).injectInside(newTr);
		var briefBoxTd = new Element('td',{
			'class' : 'briefBox contentBox',
			'events': tdEvents
		}).injectInside(newTr);
		//为条目控件增加修改内容的方法
		$extend(newTr, {
			'setName' : function(nameString){
				nameBoxTd.setHTML(nameString);
				return newTr;
			},
			'setBrief' : function(briefString){
				briefBoxTd.setHTML(briefString);
				return newTr;
			}
		});
		return newTr;
	},

	/**
	 * 生成菜单行
	 * @param {int} id 该菜单说针对的联系人ID
	 * @param {Object} actionPack 该菜单的权限信息
	 * @return 装载菜单的TR控件
	 */
	buildMenuBoxTr : function(id, actionPack) {
		var actionButtons = new Array();
		actionPack.each(function(action){
			if (action.allow && action.name != 'create') {
				actionButtons.push(new Element('a',{
					'href'   : '#',
					'class'  : action.name + 'Button',
					'events' : {
						'click'	: this.action.item.create({
							'event'    : true,
							'arguments': {'id':id,'action':action.name},
							'bind'     : this.action
						})
					}
				}).setHTML('[' + action.text + ']'));
			}
		},this);
		this.menuBoxTr = new Element('tr');
		if (!actionButtons.length) this.menuBoxTr.setStyle('display', 'none');
		this.menuBoxTd = new Element('td',{
			'colspan'	: 2,
			'class'		: 'menuBox'
		}).injectInside(this.menuBoxTr).setHTML('您可以对此联系人信息进行以下操作：');
		actionButtons.each(function(actionButton){
			actionButton.injectInside(this.menuBoxTd);
		},this);
		return this.menuBoxTr;
	},

	/**
	 * 生成详细信息行
	 * @return 装载详细信息的TR控件
	 */
	buildMoreBoxTr : function() {
		this.moreBoxTr = new Element('tr');
		this.moreBoxTd = new Element('td',{
			'colspan' : 2,
			'class'   : 'moreInfoBox'
		}).injectInside(this.moreBoxTr);
		$extend(this.moreBoxTr, {
			moreBoxTd : this.moreBoxTd,
			pushClassData : function(classData){
				if(!classData) throw new Error('数据缺失');
				var classElmt = new Element('div',{
					'class' : 'classPack' + (classData.styleClass ? ' '+classData.styleClass : '')
				}).injectInside(this.moreBoxTd);
				if (classData.title) var classTitle = new Element('h3').injectInside(classElmt).setHTML(classData.title);
				var haveItem = false;
				classData.items.each(function(item){
					if (!item.content) return false;
					haveItem = true;
					var itemBox = new Element('div',{
						'class' : 'itemBox'
					}).injectInside(classElmt);
					if (item.title) var itemTitle = new Element('h4').injectInside(itemBox).setHTML(item.title + '：');
					var itemContent = new Element('pre').injectInside(itemBox).setHTML(item.content);
				});
				if (!haveItem) classElmt.setStyle('display', 'none');
				return classElmt;
			}
		});
		return this.moreBoxTr;
	},
	
	/**
	 * 清空表格中除了标题之外的所有行
	 * @return {element} 表格本身
	 */
	clear : function(){
		$ES('tr', this.table).each(function(tr){
			if (tr.getProperty('class') != 'listTitle') tr.remove();
		});
		this.menuBoxTr = null;
		this.moreBoxTr = null;
		return this.table;
	},
	
	/**
	 * 将事件控件所在的行或者指定的行控件标记为打开状态(class设定为"opened")
	 * @param {Object} e 事件对象或指定控件
	 */
	markOpened : function(e){
		if ($type(e) == 'event') e = new Event(e).target.getParent();
		this.toggleTrClass(e,'opened');
		if (this.openedTrElmt) this.toggleTrClass(this.openedTrElmt, 'opened');
		this.openedTrElmt = e;
	},
	
	/**
	 * 翻转事件控件所在的行或指定行控件的指定class值
	 * @param {Object} e 事件对象或指定控件
	 * @param {string} className 要翻转的class名称
	 */
	toggleTrClass : function(e, className){
		if ($type(e) != 'element') e = new Event(e).target.getParent();
		e.getChildren().toggleClass(className);
	}
})
.implement(new Events);

/**
 * 生成高级菜单控件
 */
var AdvancedMenu = new Class({
	/**
	 * 生成高级菜单控件
	 */
	build : function(){
		this.baseElmt = new Element('div', {'id': 'advancedMenu'});
		this.titleElmt = new Element('div', {'id': 'adMenuTitle'})
		.addClass('closed')
		.disableSelectText()
		.setText('高级菜单>>')
		.injectInside(this.baseElmt);
		this.contentElmt = new Element('div', {'id': 'adMenuContent'})
		.injectInside(this.baseElmt);
		this.contentSlide = new Fx.Slide(this.contentElmt).hide();
		this.titleElmt.addEvent('click', function(e){
			e = new Event(e).stop();
			this.titleElmt
			.setText(this.titleElmt.getText()=='高级菜单>>'? '高级菜单<<' : '高级菜单>>' )
			.toggleClass('closed').toggleClass('opened');
			this.contentSlide.toggle();
		}.bind(this));
		this.buildSearchForm().injectInside(this.contentElmt);
		this.buildCreateForm().injectInside(this.contentElmt);
		return this.baseElmt
	},
	
	/**
	 * 生成搜索菜单控件
	 */
	buildSearchForm : function(){
		this.searchFormElmt = new Element('form', {'id': 'searchForm'});
		new Element('h3').injectInside(this.searchFormElmt).setText('搜索联系人');
		var clewInfo = '请输入关键字';
		this.searchKeyBox = new Element('input', {
			'type' : 'text',
			'class': 'inputBox',
			'value': clewInfo
		}).injectInside(this.searchFormElmt);
		this.submitButton = new Element('input', {
			'type' : 'submit',
			'class': 'button',
			'value': '搜索'
		}).injectInside(this.searchFormElmt);
		//事件设定
		this.searchKeyBox.addEvent('focus', function(e){
			if (this.searchKeyBox.value == clewInfo) this.searchKeyBox.value = '';
		}.bind(this));
		this.searchKeyBox.addEvent('blur', function(e){
			if (!this.searchKeyBox.value.trim()) this.searchKeyBox.value = clewInfo;
		}.bind(this));
		this.searchFormElmt.addEvent('submit', function(e){
			e = new Event(e).stop();
			var searchKey = this.searchKeyBox.value.trim();
			searchKey = (searchKey==clewInfo ? '' : searchKey);
			if (searchKey) {
				this.fireEvent('onSearch', searchKey);
			}else {
				this.fireEvent('onEmptySearch');
			}
		}.bind(this));
		return this.searchFormElmt;
	},
	
	/**
	 * 生成创建联系人按钮表单
	 */
	buildCreateForm : function(){
		this.createFormElmt = new Element('form', {'id': 'createForm'})
		.setStyle('display', (membership.popedom.find('linkman','create') ? '' : 'none'));
		new Element('h3').injectInside(this.createFormElmt).setText('创建联系人');
		this.createButton = new Element('input', {
			'type' : 'submit',
			'class': 'button',
			'value': '新建联系人'
		}).injectInside(this.createFormElmt);
		this.createFormElmt.addEvent('submit', function(e){
			e = new Event(e).stop();
			this.fireEvent('onCreate');
		}.bind(this));
		return this.createFormElmt;
	},
	
	/**
	 * 刷新高级菜单项目
	 */
	refresh : function(){
		this.createFormElmt.setStyle('display', (membership.popedom.find('linkman','create') ? '' : 'none'));
	}
})
.implement(new Events);

/**
 * 生成导航条控件
 */
var Navigation = new Class({
	options : {
		'noncePage'       : 1,
		'itemCount'       : 0,
		'itemLimitOfPage': 10
	},
	build : function(options){
		options = $merge(this.options, options);
		options.pageCount = Math.ceil(options.itemCount / options.itemLimitOfPage);
		this.baseElmt = new Element('div', {'id': 'navigation'});
		this.buttonBaseElmt = new Element('div', {'id': 'buttonBase'}).injectInside(this.baseElmt);
		this.buttons = {};
		[{'name': 'first', 'text': '第一页', 'pageNumber': 1},
		 {'name': 'prev', 'text': '上一页', 'pageNumber': (options.noncePage.toInt()-1)},
		 {'name': 'next', 'text': '下一页', 'pageNumber': (options.noncePage.toInt()+1)},
		 {'name': 'end', 'text': '第末页', 'pageNumber': options.pageCount}]
		.each(function(button){
			if (
				(button.name == 'first' && options.noncePage <= 1) ||
				(button.name == 'prev' && options.noncePage <= 1) ||
				(button.name == 'next' && options.noncePage >= options.pageCount) ||
				(button.name == 'end' && options.noncePage >= options.pageCount)
				
			) return false;
		 	this.buttons[button.name] = new Element('a', {'href': '#', 'class': 'button '+button.name})
			.setText(button.text)
			.injectInside(this.buttonBaseElmt)
			.addEvent('click', function(e){
				e = new Event(e).stop();
				this.fireEvent('on'+button.name.capitalize(), button.pageNumber);
				this.fireEvent('onJumpPage', button.pageNumber);
			}.bind(this));
		 }.bind(this));
		this.linkBaseElmt = new Element('div', {'id': 'linkBase'}).injectInside(this.baseElmt);
		Range(1, options.pageCount, 1).each(function(i){
		 	new Element('a', {'href': '#', 'class': 'pageLink' + (options.noncePage==i ? ' nonce' : '')})
			.setText(i)
			.injectInside(this.linkBaseElmt)
			.addEvent('click', function(e){
				e = new Event(e).stop();
				var pageNumber = i;
				this.fireEvent('onJumpPage', pageNumber);
			}.bind(this));
		}.bind(this));
		return this.baseElmt;
	},
	
	clear : function(){
		try {
			this.baseElmt.remove();
		}catch(e){}
		return this;
	}
})
.implement(new Events);
